<template>
  <div class="main">
    <div class="wrap">
      <canvas id="myCanvas" width="1080" height="2520" style="display:none;border: 2px solid grey"></canvas>
      <div id="qrcode" style="display:none"></div>
      <img class="recurit-jpg" src alt />
      <!-- <van-loading class="loading" v-show="loading" type="spinner" /> -->
    </div>
    <!-- <img src="@/assets/images/activity/youhuifu/haibao.jpg" alt /> -->
    <!-- 分享弹窗 -->
    <div class="share" v-show="isShow" @click="off">
      <!-- <img class="share_img" src="@/assets/images/activity/youhuifu/share_icon.png" alt /> -->
      <div class="share_text">
        <p>点击右上方分享至</p>
        <p>好友或朋友圈</p>
      </div>
    </div>
    <!-- <div class="btn" @click="toshare">立即分享</div> -->
  </div>
</template>
<script>
import { baseUrl } from '@/config/env';
import QRCode from 'qrcodejs2';
// import { Field } from 'vant';
import weixin from '@/components/wx/wx.js';
// import wx from 'weixin-js-sdk';
// import { VanImagePreview } from 'vant/types/image-preview';
export default {
  data() {
    return {
      content: '',
      isShow: false,
      nickName: '',
      url: ''
    };
  },
  // created() {
  //   this.geturl();
  //   this.$http.post('/tuser/userInfo', {}).then(res => {
  //     console.log(res);
  //     if (res.data.code === '0') {
  //       this.nickName = res.data.object.nickName;
  //     }
  //   });
  // },
  mounted() {
    this.$http.post('/tuser/userInfo', {}).then(res => {
      if (res.data.code === '0') {
        this.nickName = res.data.object.nickName;
      }
    });
    // setTimeout(() => {
    //   this.geturl();
    // }, 100);
    this.geturl();
    // this.$http.post('/tuser/userInfo', {}).then(res => {
    //   console.log(res);
    //   if (res.data.code === '0') {
    //     this.nickName = res.data.object.nickName;
    //   }
    // });
    // console.log(this.url);
    // this.content = baseUrl + this.url;
    // this.qrcode(this.content);
    // setTimeout(() => {
    //   this.initWxChat();
    // }, 400);
  },
  methods: {
    qrcode(content) {
      // eslint-disable-next-line
      const qrcode = new QRCode('qrcode', {
        width: 75,
        height: 75, // 高度
        text: content // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      });
      const canvas = document.getElementById('myCanvas');
      const context = canvas.getContext('2d');
      const that = this;
      var img = new Image();
      img.src = require('../../../assets/images/recommend/haibao.jpg');
      console.log(img.src);
      img.onload = function() {
        context.drawImage(this, 0, 0, 1080, 2420);
        context.font = '45px Arial';
        context.fillStyle = 'white';
        context.shadowBlur = 0;
        // context.fillText('邮储银行 ' + that.name, 145, 100);
        // context.fillText('邀请您使用邮惠付产品', 110, 150);

        const img2 = new Image();
        img2.src = document.getElementsByTagName('img')[0].src;
        img2.onload = () => {
          context.drawImage(img2, 440, 1050, 220, 220);
          document.getElementsByTagName('img')[1].src = canvas.toDataURL(
            'image/png',
            1
          );
          that.loading = false;
        };
      };
    },
    // 获取分享后跳转地址
    geturl() {
      this.$http.post('/tuserBindcard/getInviteUrl', {}).then(res => {
        console.log(res);
        if (res.data.code === '0') {
          this.url = res.data.object.url;
          console.log('这是地址', this.url);
          this.content = baseUrl + this.url;
          this.qrcode(this.content);
          this.initWxChat();
        }
      });
    },
    toshare() {
      this.isShow = true;
    },
    off() {
      this.isShow = false;
    },
    initWxChat: function() {
      const url = window.location.href.split('#')[0];
      const param = {
        title: '您的好友' + this.nickName + '邀请您办理邮储市民卡！（社会保障卡）！',
        desc: '领取缤纷好礼，邀请好友成功办卡并激活可获20-50积分。',
        link: baseUrl + this.url,
        imgUrl: 'http://img.580travel.com/youchu/king.jpg',
        localUrl: url,
        source: 'etc'
      };
      weixin.wxChat(this, param);
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 160px;
  background: #fff;
  :first-child {
    font-size: 34px;
    color: #6a6a6a;
  }
  :nth-child(2) {
    font-size: 30px;
    color: #313131;
  }
}
.text {
  width: 100%;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 45px;
  letter-spacing: 5px;
  color: #ffffff;
  position: absolute;
  top: 180px;
}
.btn {
  margin: 50px auto;
  width: 690px;
  height: 88px;
  background-color: #fb6b48;
  border-radius: 8px;
  font-size: 32px;
  color: #ffffff;
  text-align: center;
  line-height: 88px;
}
.wrap {
  margin: 0 auto;
  // background-image: url('../../assets/image/recruit.jpg');
  // background-size: 100% 100%;
  position: relative;
  height: 100%;
  overflow: scroll;
  .recurit-jpg {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
.share {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10;
  .share_img {
    width: 200px;
    position: absolute;
    top: 20px;
    right: 20px;
  }
  .share_text {
    position: absolute;
    top: 200px;
    right: 120px;
    color: #fff;
    font-size: 30px;
  }
}
</style>
